<template>
  <div>
    <!-- 顶部导航 -->
    <van-nav-bar title="修改密码">
      <template #left>
        <span @click="$emit('close')">
          <svg-icon style="margin-left: 10px;" icon-class='fanhui' width="30px" height="30px" class="icon"/>
        </span>
      </template>
    </van-nav-bar>

    <!-- 文本结构 -->

    <van-form @submit="onConfirm">
      <van-field
        v-model="oldPwd"
        name="旧密码"
        label="旧密码"
        placeholder="旧密码"
        :rules="[{ required: true, message: '请填写旧密码' }]"
      />
      <van-field
        v-model="newPwd"
        name="新密码"
        label="新密码"
        placeholder="新密码"
        :rules="[{ required: true, message: '请填写新密码' }]"
      />
      <div style="margin: 20px;">
        <van-button round block type="info" native-type="submit" color="#ec87c0">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { updateUserPwdAPI } from '@/api'

export default {
  name: 'PwdEdit',

  props: {
    userPwd: {
      type: String,
      default: ''
    }
  },

  data () {
    return {
      oldPwd: '',
      newPwd: ''
    }
  },

  methods: {
    // 点击确认
    async onConfirm () {
      try {
        await updateUserPwdAPI({
          oldPwd: this.oldPwd,
          newPwd: this.newPwd
        })

        this.$toast.success('修改成功')

        // 修改成功后需要关闭页面，并更新昵称
        // 更新昵称
        this.$emit('update:userPwd', '')

        // 关闭弹框
        this.$emit('close')
      } catch (error) {
        console.log(error)
        this.$toast.fail('修改失败')
      }
    }
  }
}
</script>

<style scoped>

</style>
